<template>
    <div class="whole">
        <div class="rotation ">
            <van-swipe :autoplay="3000" :lazy-render="true" indicator-color="#BDBEBD">
                <van-swipe-item v-for="ele in banner" :key="ele.bannerid">
                    <img :src="ele.image" width="100%" height="100%" />
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script>

    import {
        getBanner
    } from "../../api/behindTheScenes"
    export default {
        name: 'whole',
        data() {
            return {
                banner: []
            }
        },

        created() {
            getBanner().then(data => {
                this.banner = data.data;
                console.log(this.banner);
            })
        }
    }
</script>

<style lang="less" scoped>
    .rotation {
        width: 100%;
        height: 212px;

        & /deep/ .van-swipe__indicator {
            width: 14px;
            height: 2px;
            border-radius: 0;
        }

        .van-swipe-item {
            transform: translateZ(0);
        }
    }
</style>